<template>
  <div class="cmt_container">
    <h3>评论列表</h3>
    <textarea
      placeholder="请输入要BB的内容（最多吐槽120字）"
      maxlength="120"
    ></textarea>
    <div class="cmt_list">
      <div class="cmt_item" v-for="(v, i) in comments" :key="v.id">
        <div class="cmt_title">
          第 {{ i + 1 }} 楼&nbsp;&nbsp;用户：{{
            v.email
          }}&nbsp;&nbsp;发表时间：{{ date }}
        </div>
        <div class="cmt-body">
          {{ v.body }}
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="more"
      >加载更多</mt-button
    >
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import moment from "moment";
export default {
  name: "Comment",
  data() {
    return {
      date: moment().format("YYYY-MM-DD HH:mm:ss"),
      comments: [],
      pageSize: 2,
      startIndex: 0,
    };
  },
  props: ["id"],
  mounted() {
    this.getCommentsById();
  },
  methods: {
    getCommentsById() {
      let endIndex = this.startIndex + this.pageSize;
      this.axios.get("api/comments?postId=" + this.id).then(
        (res) => {
          let data = res.data.slice(this.startIndex, endIndex);
          if (data.length) {
            this.comments = this.comments.concat(data);
          } else {
            Toast("没有更多了");
          }
        },
        (err) => {
          Toast(err.message);
        }
      );
    },
    more() {
      this.startIndex += this.pageSize;
      //   this.endIndex += this.pageSize;
      this.getCommentsById();
    },
  },
};
</script>

<style lang="less" scoped>
.cmt_container {
  font-size: 14px;
  margin-top: 30px;
  h3 {
    font-size: 16px;
  }
  textarea {
    height: 150px;
    margin: 0;
    font-size: 14px;
  }
}
</style>